let grid_v = new Vue({
    el:".grid",
    data:{
        p_arr:[]
    },
    created:function () {//Vue对象创建完之后执行的方法
        //得到地址栏中的参数 判断是否包含cid
        if (location.search.indexOf("cid")!=-1){//包含cid
            console.log("点击的是分类");
            //从地址栏中取出cid的值   ?cid=1
            let cid = location.search.split("=")[1];
            //发请求获取和点击分类相关的作品信息
            axios.get("/product/selectbycid?cid="+cid).then(function (response) {
                grid_v.p_arr = response.data;
            })
        }else{
            console.log("点击的是首页");
            //发请求获取所有作品信息
            axios.get("/product/select").then(function (response) {
                grid_v.p_arr = response.data;
            })
        }
    },
    updated:function () {//当Vue对象中的变量发生改变后执行的方法
        //瀑布流初始化相关操作
        $(".grid").imagesLoaded().progress(function () {
            $(".grid").masonry({
                itemSelector:".grid-item",
                columnWidth:210
            })
            //图片加载完之后给图片添加鼠标移入移出事件
            $(".grid-item").hover(function () {//鼠标移入
                //$(this)得到触发事件的元素
                //.children()获取某个元素的子元素
                //fadeIn()淡入动画
                $(this).children("div").stop().fadeIn(500);
            },function () {//鼠标移出
                $(this).children("div").stop().fadeOut(500);
            });
        });
    }
})